<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

    <title>Remove image background!</title>

    <link href="styles/main.css" rel="stylesheet">
    <link href="styles/toolbar.css" rel="stylesheet">
    <link href="styles/progress.css" rel="stylesheet">
    <link href="styles/fonts.css" rel="stylesheet">

    <script src="libs/opencv.js"></script>
    
    <!-- <script src="https://kit.fontawesome.com/11352e1688.js" crossorigin="anonymous"></script> -->
    <link href="styles/fontawesome-free-5.13.0-web/css/all.min.css" rel="stylesheet"> <!--load all styles -->
    
    
</head>

<body>
    <div class="overflow-wrapper" id="app">
        <div class="social">
            <a href="https://github.com/seanabanana"><i class="fab fa-github"></i></a>
            <a href="https://twitter.com/MaybeShauna"><i class="fab fa-twitter"></i></a>
        </div>
        <div class="titlebg-yellow"></div>
        <div class="titlebg"></div>
        <p class="titlebg-text">
            ©2018-2020 Shengchen Zhang, all rights reserved.<br/>
        </p>

        <div class="intro">
            <h2>we want transparency!</h2>
            <p>no, probably not the transparency you were thinking...😈</p>
            <p>this tool recovers the lost transparency information from an image by removing its background, as long as the background is all in one single color. For more information, check out its <a href="https://github.com/seanabanana/RemoveBackground">github repo</i></a>. </p>
            <p class="bold" id="tip">drop/add an image below to see it in action!</p>
            <p class="bold" id="tip-download">transparency restored! <a href="#" onclick="downloadResult(); return false;">click here to download.</a></p>
        </div>

        <div class="image-container" id="image-container">

            <canvas id="canvas"></canvas>
            <img id="image" alt="No Image"/>

            <div id="upload">
                <input type="file" id="file" name="file" />
                <label for="file">
                    <span>
                        <i class="fas fa-upload"></i> <br/>
                        drop an image or click to upload
                    </span>
                </label>
            </div>
            <div class="progress" id="progress"><div class="progress-fill" id="progress-fill"></div></div>
        </div>

        <!--
        <div class="toolbar">
            <button id="eyedropper" onclick="eyedropperClicked();">
                <i class="fas fa-eye-dropper"></i>
            </button>
            <br/>
            <button id="download" onclick="downloadClicked();">
                <i class="fas fa-download"></i>
            </button>
        </div>
        -->
    </div>

    <div id="em" style="height:0;width:0;outline:none;border:none;padding:none;margin:none;box-sizing:content-box;"></div>

    <img id="real-image"/>
    <canvas id="real-canvas"></canvas>

    <script src="scripts/ui.js"></script>
    <script src="scripts/imageprocessing.js"></script>
    <script src="scripts/main.js"></script>

</body>

</html>
